
<div class="page-group">
    <div class="page page-current" id="page-mycar" ng-show="!pagedata.show_brand_list">
		<header class="bar bar-nav" ng-if="page.action=='member.mycar'">
		    <a class="button button-link button-nav pull-left back" href="javascript:;" ng-click="goback()">
		        <span class="icon icon-left"></span>返回</a>
		    <h1 class="title">我的车辆信息</h1>
		</header>
		<header class="bar bar-nav" ng-if="page.action=='move'">
		    
		    <h1 class="title">激活挪车卡</h1>
		</header>
		<div class="content native-scroll">
		    <div class="list-block media-list" style="margin-bottom: 0.5em;margin-top: 1em;">
		        <div class="content-block-title" style="margin-top: 1em;text-align: center;">第一次使用请先完善车辆信息，获得所有功能体验</div>
		        <ul>
		            <li>
		                <a href="javascript:;" class="item-link item-content open-popup" ng-click="pagedata.choose_car()">
		                    <div class="item-media tbpad">
		                        <img ng-src="{{pagedata.tomedia(pagedata.item.brandimg)}}" width="44" height="63" id="brandimg"></div>
		                    <div class="item-inner tbpad">
		                        <div class="item-title" style="line-height: 44px;" id="brandtitle">{{ifelse(pagedata.item.brand,pagedata.item.brand,'请选择您的车辆品牌和型号')}}</div></div>
		                </a>
		            </li>
		        </ul>
		    </div>
		    <div class="list-block" style="margin: .5rem 0;">
		        <ul>
		            <!--
		            <li>
		                <div class="item-content">
		                    <div class="item-inner">
		                        <div class="item-title label">所在城市</div>
		                        <div class="item-input">
		                            <input type="text" id="city-picker" readonly value="{$member['province']} {$member['city']}"></div>
		                    </div>
		                </div>
		            </li>-->
		            <li>
		                <div class="item-content">
		                    <div class="item-inner">
		                        <div class="item-title label" style="color:#333;">车牌号</div>
		                        <div class="item-input">
		                            <div class="row">
		                                <div class="col-15">
		                                    <input type="text" id="pic_city" onclick="$('#choose_province').show()" readonly value="{{pagedata.item.plate.p}}" style="color: #0894ec;"></div>
		                                <div class="col-15">
		                                    <input type="text" id="pic_num" onclick="$('#choose_city').show()" readonly value="{{pagedata.item.plate.c}}" style="color: #0894ec;"></div>
		                                <div class="col-60">
		                                    <input type="text" placeholder="填写车牌号" id="plate_number" ng-model="pagedata.item.plate.number"></div>
		                            </div>
		                        </div>
		                    </div>
		                </div>
		            </li>
		            <li>
		                <div class="item-content">
		                    <div class="item-inner">
		                        <div class="item-title label" style="color:#333;">发动机号</div>
		                        <div class="item-input">
		                            <input type="text" placeholder="输入完整的发动机号" id="engine_number" ng-model="pagedata.item.engine_number" ></div>
		                        <div class="item-after"><i class="weui_icon_info"></i></div>
		                    </div>
		                </div>
		            </li>
		            <li>
		                <div class="item-content">
		                    <div class="item-inner">
		                        <div class="item-title label" style="color:#333;">车架号</div>
		                        <div class="item-input">
		                            <input type="text" placeholder="输入完整的车架号" id="frame_number" ng-model="pagedata.item.frame_number" ></div>
		                        <div class="item-after"><i class="weui_icon_info"></i></div>
		                    </div>
		                </div>
		            </li>
		        </ul>
		    </div>
			<div class="list-block" style="margin-top: 0;" ng-if="page.action=='move'">
		        <ul>
		        	<li>
				      	<div class="item-content">
				        	<div class="item-inner">
				        		<div class="item-title label">挪车卡号</div>
				          		<div class="item-input">
				            		<input type="text" name="ncnumber" id="ncnumber" ng-model="pagedata.item.card_number" readonly>
				          		</div>
				        	</div>
				      	</div>
				    </li>
		            <li>
				      	<div class="item-content">
				        	<div class="item-inner">
				        		<div class="item-title label">手机号码</div>
				          		<div class="item-input">
				            		<input type="tel" name="mobile" id="loginmobile" placeholder="请输入手机号码" ng-model="pagedata.item.mobile">
				          		</div>
				        	</div>
				      	</div>
				    </li>
		            <li ng-if="pagedata.check_mobile==1">
				      	<div class="item-content">
				        	<div class="item-inner">
				        		<div class="item-title label">验证码</div>
				          		<div class="item-input">
				            		<input type="text" ng-model="pagedata.item.code" id="logincode" placeholder="请输入验证码">
				          		</div>
				          		<div id="getVerifyCode" ng-click="tool.mobile_code(pagedata.item.mobile,'getVerifyCode')" class="verifycode">发送验证码</div>
				        	</div>
				      	</div>
				    </li>
		        </ul>
		        
		    </div>
		    <div class="content-block">
		        <div class="row">

		            <div class="col-100">
		                <a href="javascript:;" class="weui_btn weui_btn_primary" ng-click="post(pagedata.item,pagedata.op)" id="savemycar">保存</a>
		            </div>
		        </div>
		    </div>
		</div>
		<div class="weui_dialog_alert" id="choose_province" style="display:none;opacity: 1;"> <div class="weui_mask"> </div><div class="weui_dialog"><div class="weui_dialog_hd"><strong class="weui_dialog_title">请选择</strong> </div><div class="weui_dialog_bd dialog_city_list dialog_city_list1"><span><font>京</font> </span><span><font>津</font> </span><span><font>冀</font> </span><span><font>晋</font> </span><span><font>蒙</font> </span><span><font>辽</font> </span><span><font>吉</font> </span><span><font>黑</font> </span><span><font>沪</font> </span><span><font>苏</font> </span><span><font>浙</font> </span><span><font>皖</font> </span><span><font>闽</font> </span><span><font>赣</font> </span><span><font>鲁</font> </span><span><font>豫</font> </span><span><font>鄂</font> </span><span><font>湘</font> </span><span><font>粤</font> </span><span><font>桂</font> </span><span><font>琼</font> </span><span><font>渝</font> </span><span><font>川</font> </span><span><font>贵</font> </span><span><font>云</font> </span><span><font>藏</font> </span><span><font>陕</font> </span><span><font>甘</font> </span><span><font>青</font> </span><span><font>宁</font> </span><span><font>新</font> </span><span><font>港</font> </span><span><font>澳</font> </span></div> <div class="" style="clear: both;"> </div><div class="weui_dialog_ft" style="clear: both;margin-top: 15px;"><a href="javascript:;" class="weui_btn_dialog primary external" onclick="$('#choose_province').hide()">关闭</a> </div></div> </div>
		<div class="weui_dialog_alert" id="choose_city" style="display:none;opacity: 1;"> <div class="weui_mask"> </div><div class="weui_dialog"><div class="weui_dialog_hd"><strong class="weui_dialog_title">请选择</strong> </div><div class="weui_dialog_bd dialog_city_list dialog_city_list2"><span><font>A</font> </span><span><font>B</font> </span><span><font>C</font> </span><span><font>D</font> </span><span><font>E</font> </span><span><font>F</font> </span><span><font>G</font> </span><span><font>H</font> </span><span><font>I</font> </span><span><font>J</font> </span><span><font>K</font> </span><span><font>L</font> </span><span><font>M</font> </span><span><font>N</font> </span><span><font>O</font> </span><span><font>P</font> </span><span><font>Q</font> </span><span><font>R</font> </span><span><font>S</font> </span><span><font>T</font> </span><span><font>U</font> </span><span><font>V</font> </span><span><font>W</font> </span><span><font>X</font> </span><span><font>Y</font> </span><span><font>Z</font> </span></div> <div class="" style="clear: both;"> </div><div class="weui_dialog_ft" style="clear: both;margin-top: 15px;"><a href="javascript:;" class="weui_btn_dialog primary external" onclick="$('#choose_city').hide()">关闭</a> </div></div> </div>
	</div>
	<div id="show_car_list" class="panel panel-right active" style="z-index: 99999; background: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 1rem;">
		<div class="content-block" style="padding: 0;margin: 0;">
			<div class="list-block contacts-block" style="margin-top: 0rem;">
				<div class="list-group">
					<ul ng-repeat="class in pagedata.active_brand.class">
						<li class="list-group-title">{{class.name}}</li>
						<li ng-repeat="car in class.car">
							<a ng-click="pagedata.item.brand=pagedata.active_brand.brand+' - '+car.name;pagedata.item.brandimg=pagedata.active_brand.imgs;pagedata.hide('show_car_list');pagedata.show_brand_list=false" class="item-link item-content external">
								<div class="item-inner"><div class="item-title">{{car.name}}</div></div>
							</a>
						</li>
						
					</ul>
				</div>
			</div>
		</div>
	</div>
	<div class="lettertip"></div>
	<div class="" ng-show="pagedata.show_brand_list" style="z-index: 99998;">
	    <header class="bar bar-nav">
	        <a class="button button-link button-nav pull-left " href="javascript:;" ng-click="pagedata.show_brand_list=false;">
	            <span class="icon icon-left"></span>返回</a>
	        <h1 class="title">选择品牌</h1>
	    </header>
	    <div class="pickbrand" >
    		<ul>
				<li onclick="roll(1)"><a href="javascript:;" class="external">A</a></li>
				<li onclick="roll(2)"><a href="javascript:;" class="external">B</a></li>
				<li onclick="roll(3)"><a href="javascript:;" class="external">C</a></li>
				<li onclick="roll(4)"><a href="javascript:;" class="external">D</a></li>
				<li onclick="roll(5)"><a href="javascript:;" class="external">E</a></li>
				<li onclick="roll(6)"><a href="javascript:;" class="external">F</a></li>
				<li onclick="roll(7)"><a href="javascript:;" class="external">G</a></li>
				<li onclick="roll(8)"><a href="javascript:;" class="external">H</a></li>
				<li onclick="roll(9)"><a href="javascript:;" class="external">I</a></li>
				<li onclick="roll(10)"><a href="javascript:;" class="external">J</a></li>
				<li onclick="roll(11)"><a href="javascript:;" class="external">K</a></li>
				<li onclick="roll(12)"><a href="javascript:;" class="external">L</a></li>
				<li onclick="roll(13)"><a href="javascript:;" class="external">M</a></li>
				<li onclick="roll(14)"><a href="javascript:;" class="external">N</a></li>
				<li onclick="roll(15)"><a href="javascript:;" class="external">O</a></li>
				<li onclick="roll(16)"><a href="javascript:;" class="external">P</a></li>
				<li onclick="roll(17)"><a href="javascript:;" class="external">Q</a></li>
				<li onclick="roll(18)"><a href="javascript:;" class="external">R</a></li>
				<li onclick="roll(19)"><a href="javascript:;" class="external">S</a></li>
				<li onclick="roll(20)"><a href="javascript:;" class="external">T</a></li>
				<li onclick="roll(21)"><a href="javascript:;" class="external">U</a></li>
				<li onclick="roll(22)"><a href="javascript:;" class="external">V</a></li>
				<li onclick="roll(23)"><a href="javascript:;" class="external">W</a></li>
				<li onclick="roll(24)"><a href="javascript:;" class="external">X</a></li>
				<li onclick="roll(25)"><a href="javascript:;" class="external">Y</a></li>
				<li onclick="roll(26)"><a href="javascript:;" class="external">Z</a></li>
				<li onclick="roll(27)"><a href="javascript:;" class="external">#</a></li>
			</ul>
    	</div>
	    <div class="content native-scroll" style="width: 93%;">
	        <div class="list-block contacts-block" style="margin: 0;">
	            <div class="list-group" id="brandlist">
	                <ul ng-repeat="lettery in pagedata.brands">
	                    <li class="list-group-title" id="brandlist{{$index+1}}">{{lettery.lettery}}</li>
	                    <li ng-repeat="brand in lettery.childs">
	                        <a href="javascript:;" ng-click="pagedata.active_brand=brand;pagedata.show('show_car_list');" class="item-content external item-link">
	                            <div class="item-media">
	                                <img ng-src="{{pagedata.tomedia(brand.imgs)}}" style="width: 1.45rem;" class="lazy">
	                            </div>
	                            <div class="item-inner">
	                                <div class="item-title" style="color: #3d4145;">{{brand.brand}}</div>
	                            </div>
	                        </a>
	                    </li>
	                    
	                </ul>
	            </div>
	        </div>
	    </div>
	</div>
</div>

<script>
scope.pagedata.tomedia=function(img){
	if(!img){
		return scope.plugin_resource+'images/cardefault.png';
	}else{
		return scope.plugin_resource+'images/brand/'+img;
	}
}
scope.pagedata.show=function(id){
	$('#'+id).show();
}
scope.pagedata.hide=function(id){
	$('#'+id).hide();
}
var arr1=[];
scope.pagedata.choose_car=function(){
	scope.pagedata.show_brand_list=true;
	if(arr1.length==0){
		setTimeout(function(){
			for(var i=1;i<28;i++){
				arr1[i] = $('#brandlist'+i).offset().top-50;
			}
		},1000);
	}
}
$('#page-mycar').on("click",".dialog_city_list1 span",function(){
		   	var This = $(this),
		       	city = This.text();
		    $("#pic_city").val(city);
			scope.pagedata.item.plate.p=city;
		    $('#choose_province').hide();
		    			
					});
		
$('#page-mycar').on("click",".dialog_city_list2 span",function(){  
		    var This = $(this),
		        city = This.text();
	        $("#pic_num").val(city);
			scope.pagedata.item.plate.c=city;
	        $('#choose_city').hide();
	        			
					});


function roll(asd){
		console.log(asd);
		var letter = $('#brandlist'+asd).text();
		console.log(letter);
		console.log(arr1[asd]);
		$('.lettertip').text(letter);
		$('.lettertip').show();
		$('.lettertip').fadeOut(500);
		$('.content').animate({scrollTop:arr1[asd]+'px'},1000);
	}
	
</script>

